<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Websocket</title>
</head>
<body>
<input type="text" id="message">
<button id="submit">提交</button>
<script>
// 创建 websocket 实例
// 类⽐http
// ws表⽰websocket协议
// 8880表⽰服务器绑定的端⼝
let websocket = new WebSocket("ws://43.138.129.243:8080");

// 处理连接打开的回调函数
websocket.onopen = function() {
alert("连接建⽴");
}
// 处理收到消息的回调函数
// 控制台打印消息
websocket.onmessage = function(e) {
alert("收到消息: " + e.data);
}
// 处理连接异常的回调函数
websocket.onerror = function() {
alert("连接异常");
}
// 处理连接关闭的回调函数
websocket.onclose = function() {
alert("连接关闭");
}
// 实现点击按钮后, 通过 websocket实例 向服务器发送请求
let input = document.querySelector('#message');
let button = document.querySelector('#submit');
button.onclick = function() {
alert("发送消息: " + input.value);
websocket.send(input.value);
}
</script>